import { useMemo } from 'react';

// material-ui
import { useTheme, styled } from '@mui/material/styles';
import { Box, Button, CardMedia, Container, Grid, Link, Stack, Typography } from '@mui/material';

// third party
import { motion } from 'framer-motion';
import useConfig from 'hooks/useConfig';

// project imports
import { DASHBOARD_PATH } from 'config';
import AnimateButton from 'components/ui-component/extended/AnimateButton';

// assets
import PlayArrowIcon from '@mui/icons-material/PlayArrow';

// 动画和样式封装
import AnimatedMotionDiv from './extended/AnimatedMotionDiv';
import {
  containerStyles,
  gridContainerStyles,
  imageGridStyles,
  relativeBoxStyles,
  HeaderAnimationImageStyles,
  headerSX // 如果你依然需要这个
} from './styles/HeaderSection.styles';

const TechLight = '/assets/images/landing/tech-light.svg';
const TechDark = '/assets/images/landing/tech-dark.svg';
const dashboard = '/assets/images/landing/hero-dashboard.png';
const widget1 = '/assets/images/landing/hero-widget-1.png';
const widget2 = '/assets/images/landing/hero-widget-2.png';
const BgDark = '/assets/images/landing/bg-hero-block-dark.png';
const BgLight = '/assets/images/landing/bg-hero-block-light.png';

// styles
const HeaderImage = styled('img')(({ theme }) => ({
  maxWidth: '100%',
  borderRadius: 20,
  transform: 'scale(1.7)',
  transformOrigin: theme.direction === 'rtl' ? '100% 50%' : '0 50%',
  [theme.breakpoints.down('xl')]: {
    transform: 'scale(1.5)'
  },
  [theme.breakpoints.down('lg')]: {
    transform: 'scale(1.2)'
  }
}));

const HeaderAnimationImage = styled('img')({
  maxWidth: '100%',
  filter: 'drop-shadow(0px 0px 50px rgb(33 150 243 / 30%))'
});

// ==============================|| LANDING - HEADER PAGE ||============================== //

const HeaderSection = () => {
  const theme = useTheme();
  const { rtlLayout } = useConfig();
  const HeaderAnimationImagememo = useMemo(
    () => (
      <HeaderAnimationImage
        src={theme.palette.mode === 'dark' ? BgDark : BgLight}
        alt="Doyun"
        sx={HeaderAnimationImageStyles(theme, rtlLayout)}
      />
    ),
    [rtlLayout, theme]
  );

  return (
    <Container sx={containerStyles}>
      <Grid container justifyContent="space-between" alignItems="center" sx={gridContainerStyles}>
        <Grid item xs={12} md={5}>
          <Grid container spacing={6}>
            <Grid item xs={12}>
              <AnimatedMotionDiv delay={0}>
                <Stack spacing={1}>
                  <Typography textAlign={{ xs: 'center', md: 'left' }} variant="h1" sx={headerSX}>
                    花明云低代码平台
                  </Typography>
                  <Typography textAlign={{ xs: 'center', md: 'left' }} variant="h1" color="primary" sx={headerSX}>
                    花明云：无代码，轻松连接，智能化你的世界！
                  </Typography>
                </Stack>
              </AnimatedMotionDiv>
            </Grid>
            <Grid item xs={12} sx={{ mt: -2.5, textAlign: { xs: 'center', md: 'left' } }}>
              <AnimatedMotionDiv delay={0.2}>
                <Typography
                  textAlign={{ xs: 'center', md: 'left' }}
                  color="text.primary"
                  variant="body1"
                  sx={{ fontSize: { xs: '1rem', md: '1.125rem' } }}
                >
                  正在开发中，敬请期待
                </Typography>
              </AnimatedMotionDiv>
            </Grid>
            <Grid item xs={12}>
              <AnimatedMotionDiv delay={0.4}>
                <Grid container spacing={2} sx={{ justifyContent: { xs: 'center', md: 'flex-start' } }}>
                  <Grid item>
                    <AnimateButton>
                      <Button
                        component={Link}
                        href={DASHBOARD_PATH}
                        target="_blank"
                        size="large"
                        variant="contained"
                        color="secondary"
                        startIcon={<PlayArrowIcon />}
                      >
                        进入内测
                      </Button>
                    </AnimateButton>
                  </Grid>
                </Grid>
              </AnimatedMotionDiv>
            </Grid>
          </Grid>
        </Grid>
        <Grid item xs={12} md={7} sx={imageGridStyles(theme)}>
          <Box sx={relativeBoxStyles}>
            <HeaderImage src={dashboard} alt="Doyun" />
            <Box
              sx={{
                position: 'absolute',
                top: { md: -35, lg: -110 },
                right: theme.direction === 'rtl' ? 170 : { md: -50, lg: -140, xl: -220 },
                width: { md: 220, lg: 290 },
                animation: '10s slideY linear infinite'
              }}
            >
              <AnimatedMotionDiv delay={0.2}>
                <HeaderAnimationImage src={widget1} alt="Doyun" />
              </AnimatedMotionDiv>
            </Box>
            <Box
              sx={{
                position: 'absolute',
                bottom: { md: -20, lg: -90 },
                left: { md: 100, lg: 300 },
                width: { md: 220, lg: 280 },
                animation: '10s slideY linear infinite',
                animationDelay: '2s'
              }}
            >
              <AnimatedMotionDiv delay={0.4}>
                <HeaderAnimationImage src={widget2} alt="Doyun" />
              </AnimatedMotionDiv>
            </Box>
          </Box>
          {HeaderAnimationImagememo}
        </Grid>
      </Grid>
    </Container>
  );
};

export default HeaderSection;
